<template>
    <ul class="shipList">
        <li class="ship-item" v-for="item in data" @click="selectTip(item)" :key="item">{{item}}</li>
    </ul>
</template>

<script>
    export default {
        name: "tip-list",
        props: {
            data: {
                type: Array,
                default: () => []
            },
        },
        methods: {
            selectTip(item) {
                this.$emit('selected', item)
            }
        },
    }
</script>

<style scoped lang="scss">
    @import "../../css/variable";

    .shipList {
        position: absolute;
        border: 1px solid #000;
        box-sizing: content-box;
        background: #fff;
        border-top: none;
        top: 35px;
        display: none;
        border-radius: 5px;
        width: 80%;
        max-height: 350px;
        overflow-y: scroll;
        z-index: 999;
        padding: 10px 0;
        .ship-item {
            padding-left: 10px;
            box-sizing: border-box;
            cursor: pointer;
            width: 100%;
            height: 30px;
            line-height: 30px;
            &:hover {
                background: $bg-theme;
                color: white;
            }
        }

    }
</style>